<!-- 上传情况 -->
<template>
<div class="upload-situation-wp">
  <div class="head c-flex c-col-center c-row-between">
    <div class="btn-list">
      <div class="item" :class="{active: tabIdx == 1}" @click="tabIdx = 1">对接日历</div>
      <div class="item" :class="{active: tabIdx == 2}" @click="tabIdx = 2">对接日志</div>
    </div>
    <el-date-picker class="c-m-r-20 date-select"
      v-model="time"
      type="month"
      placeholder="选择日期"
      :clearable="false"
      format="yyyy年MM月"
      value-format="yyyy-MM-dd">
    </el-date-picker>
  </div>

  <el-calendar v-show="tabIdx == 1" v-model="time" ref="calendar" :first-day-of-week="7">
    <template v-slot:dateCell="{date,data}">
      <el-popover v-if="isNowMonth(date)"
        placement="top"
        width="150"
        trigger="hover">
        <div class="date-num">
          <p>数据量：1111条</p>
          <p>表数量：8张</p>
        </div>
        <router-link to="/hosp/data-upload/list" class="date-item" slot="reference"
          :style="{backgroundColor: getBackColor(date)}">
          {{ data.day.split('-')[2] }}
        </router-link>
      </el-popover>
      <div v-else class="date-item"
        :style="{backgroundColor: getBackColor(date)}">
        {{ data.day.split('-')[2] }}
      </div>
    </template>
  </el-calendar>

  <div v-show="tabIdx == 2" class="c-p-20">
    <el-table :data="table.data"
      border
      @row-click="rowClick">
      <el-table-column v-for="(item, index) in table.head" :key="index"
        :prop="item.key"
        :label="item.label"
        align="center">
      </el-table-column>
    </el-table>
  </div>

</div>
</template>
<script>
export default {
  name: 'upload-situation',
  data () {
    return {
      tabIdx: 1,
      time: new Date(),
      popoverVisible: false,

      table: {
        head: [
          {label: '日期', key: 'a'},
          {label: '数据量上传（条）', key: 'b'},
          {label: '上传表量（张）', key: 'c'},
        ],
        data: [
          {a: '2月1日', b: '1231', c: 32},
          {a: '2月2日', b: '1231', c: 32},
          {a: '2月3日', b: '1231', c: 32},
          {a: '2月4日', b: '1231', c: 32},
          {a: '2月5日', b: '1231', c: 32},
          {a: '2月6日', b: '1231', c: 32},
        ]
      }

    }
  },
  mounted () {
    this.$el.querySelector('div.el-calendar__header').remove();
  },
  methods: {
    // 获取颜色
    getBackColor (date) {
      if (date.getMonth() != new Date(this.time).getMonth()) {
        return '';
      }

      var res = '#00CCFF';
      var nowTime = new Date().getTime();
      var thisTime = new Date(date).getTime();
      
      if ([9,10,11,12,13,14,15,16,17].indexOf(date.getDate()) != -1) {
        res = '#FF0000';
      }
      // 判断是否为空
      if (thisTime > nowTime) {
        res = '';
      }
      return res;
    },

    // 判断是否当月
    isNowMonth (date) {
      var res = date.getMonth() == new Date(this.time).getMonth();
      if (new Date(date).getTime() > new Date().getTime()) {
        res = false;
      }
      return res;
    },

    // 行点击
    rowClick (row, column, event) {
      this.$router.push('/hosp/data-upload/list');
    }

  }
}
</script>
<style lang="scss" scoped>
.upload-situation-wp {
  background: #fff;
  border: 1px solid #D7D7D7;
  .head {
    height: 81px;
    border-bottom: 1px solid #D7D7D7;
    .btn-list {
      padding-left: 20px;
      font-size: 20px;
      line-height: 70px;
      &:after {
        content: '';
        display: block;
        clear: both;
      }
      .item {
        position: relative;
        float: left;
        margin-right: 15px;
        padding: 10px 5px 0;
        cursor: pointer;
        &.active {
          font-weight: bold;
          &:after {
            content: '';
            position: absolute;
            z-index: 2;
            bottom: -2px;
            left: 0;
            right: 0;
            background: #797979;
            height: 2px;
          }
        }
      }
    }
    .date-select {
      width: 140px;
    }
  }
}
</style>
<style lang="scss">
.upload-situation-wp {
  .el-calendar {
    .el-calendar-day {
      padding: 0;
      height: 60px;
      span {
        display: block;
      }
      .date-item {
        padding: 8px;
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 44px;
        font-size: 18px;
      }
    }
    .current {
      .el-calendar-day {
        .date-item {
          color: #333;
        }
      }
    }
  }
}
</style>

